package com.example.contact.view

import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.items
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.font.FontFamily
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.*
import androidx.lifecycle.viewmodel.compose.viewModel
import com.example.contact.model.Contact
import com.example.contact.viewmodel.ContactViewModel
import com.example.featuresdk.core.AbstractFeatureSDK
import com.example.featuresdk.view.AppBottomNavigationView
import com.example.featuresdk.view.AppHeaderFeatureView
import com.example.featuresdk.viewmodel.NavigationViewModel

@ExperimentalFoundationApi
@ExperimentalUnitApi
@Composable
fun ContactListView(
    navigationViewModel: NavigationViewModel,
    featureSDK: AbstractFeatureSDK,
    contactViewModel: ContactViewModel = viewModel()) {

    val featureKey = featureSDK.featureKey()

    Column(modifier = Modifier
        .background(Color.Transparent).fillMaxSize()) {

        AppHeaderFeatureView(navigationViewModel)

        //https://developer.android.google.cn/jetpack/compose/lists
        LazyColumn(modifier = Modifier
            .background(Color.Transparent)
            .fillMaxWidth()
            .height(navigationViewModel.appBodyHeightDp.dp),
            contentPadding = PaddingValues(horizontal = 0.dp,vertical = 8.dp),
            verticalArrangement = Arrangement.spacedBy(8.dp)){

            contactViewModel.groupedContacts.forEach { (key, topics) ->
                stickyHeader(key){
                    Text(text = key, modifier = Modifier.fillMaxWidth().background(Color.LightGray).padding(2.dp).height(20.dp),
                        color = Color.Gray,
                        fontSize = TextUnit(4f, TextUnitType.Em), textAlign = TextAlign.Start)
                }

                items(topics){
                        topic -> ContactEntryView(topic,navigationViewModel,featureSDK.featureKey())
                }
            }

            item(){
                Text(text = "End",color = Color.Gray, modifier = Modifier
                    .height(20.dp)
                    .fillMaxWidth(), textAlign = TextAlign.Center)
            }
        }

        AppBottomNavigationView(navigationViewModel)
    }
}


@ExperimentalUnitApi
@Composable
fun ContactEntryView(contact: Contact, screenConfiguration: NavigationViewModel, featureKey:String) {

    val horizontalPadding = 4
    val spacerWidth = 20
    val arrowWidth = 8
    val iconWidthHeight = 30
    val textWidth = screenConfiguration.screenWithDp - horizontalPadding - horizontalPadding - iconWidthHeight - spacerWidth - arrowWidth

    val tailingContent = ""

    Row(horizontalArrangement = Arrangement.Start,
        verticalAlignment = Alignment.Top,
        modifier = Modifier.background(Color.White).clickable {
            screenConfiguration.navHostController.navigate("${featureKey}/contact/${contact.key}")
        }){

        Spacer(modifier = Modifier.width(horizontalPadding.dp))

        Image(painter = painterResource(contact.icon),
            contentDescription = "",
            modifier = Modifier.width(iconWidthHeight.dp).height(iconWidthHeight.dp))

        Spacer(modifier = Modifier.width(spacerWidth.dp))

        Column() {
            Row {
                Text(text = contact.name,
                    modifier = Modifier
                        .width(textWidth.dp).height(40.dp)
                        .background(Color.Transparent),
                    textAlign = TextAlign.Start,
                    fontSize = TextUnit(4f, TextUnitType.Em),
                    fontFamily = FontFamily.SansSerif
                )
                Text(text = "$tailingContent",
                    modifier = Modifier.width(arrowWidth.dp),
                    color = Color.Gray,
                    fontSize = TextUnit(5f, TextUnitType.Em))
            }

            Text(text="", modifier = Modifier.height(1.dp).width((textWidth + arrowWidth).dp).border(
                Dp.Hairline,Color.LightGray))
        }
        Spacer(modifier = Modifier.width(horizontalPadding.dp))
    }
}